<template>
  <div class="container">
    <van-nav-bar fixed title="首页" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img
          class="banner-img"
          :src="'http://124.223.14.236:8060/' + item.advimgsrc"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 通知 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 热门推荐 -->
    <van-cell>
      <h3 slot="title" class="group-title">热门推荐</h3>
    </van-cell>
    <recommend-list />
    <!-- 最近更新 -->
    <van-cell class="currentNew">
      <h3 slot="title" class="group-title">最近更新</h3>
      <span
        >24小时： <b>{{ listData.num_day }}篇</b></span
      >
      /
      <span
        >1周： <b>{{ listData.num_week }}篇</b></span
      >
    </van-cell>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <articleList v-for="(item,index) in list" :key="index" :item="item"></articleList>
      </van-list>
  </div>
</template>
<script>
import articleList from '@/components/article-list.vue'
import RecommendList from '../components/recommend-list.vue'
import { indexData, nowNews } from '@/api/index'
export default {
  name: 'indexPage',
  components: { articleList, RecommendList },
  data () {
    return {
      banner: [],
      listData: {},
      list: [],
      loading: false,
      finished: false,
      page: 1,
      limit: 10
    }
  },
  async created () {
    const res = await indexData()
    // ! 首页轮播图
    this.banner = res.data.banner
  },
  methods: {
    async onLoad () {
      const res2 = await nowNews({
        page: this.page,
        limit: this.limit
      })
      this.listData = res2.data
      this.list.push(...res2.data.list.data)
      this.loading = false
      this.page++
      if (this.page > res2.data.list.totalPages) {
        this.finished = true
      }
    }
  }
}
</script>
<style scoped lang="less">
.banner-img {
  width: 100%;
}
.group-title {
  color: #1989fa;
}
// .currentNew{
//   margin-top: -130px;
// }
</style>
